<template>
  <div
    class="bottom-spacer"
    :style="spacerStyle"
    :class="{
      'bottom-spacer--animated': animated,
      'bottom-spacer--visible': isBottomVisible
    }"
  >
    <!-- 可选的视觉指示器 -->
    <div
      v-if="showIndicator && isBottomVisible"
      class="bottom-spacer__indicator"
    >
      <div class="bottom-spacer__indicator-line"></div>
      <div class="bottom-spacer__indicator-text">
        {{ indicatorText }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useScrollDetection } from '@/composables/useScrollDetection'
import { useBottomAnimation } from '@/composables/useBottomAnimation'

/**
 * BottomSpacer 组件属性
 */
interface Props {
  /** 基础高度（像素） */
  height?: number
  /** 是否启用动画 */
  animated?: boolean
  /** 是否显示底部指示器 */
  showIndicator?: boolean
  /** 指示器文本 */
  indicatorText?: string
  /** 自定义样式类 */
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 200,
  animated: true,
  showIndicator: false,
  indicatorText: '已到达底部',
  customClass: ''
})

// 使用滚动检测
const { isNearBottom, isAtBottom } = useScrollDetection()

// 使用动画控制
const { shouldShow, animationProgress, getContainerStyle } = useBottomAnimation(
  isNearBottom,
  isAtBottom
)

// 计算是否显示底部内容
const isBottomVisible = computed(() => {
  return props.animated ? shouldShow.value : isNearBottom.value || isAtBottom.value
})

// 计算间距样式
const spacerStyle = computed(() => {
  const baseHeight = props.height

  if (!props.animated) {
    return {
      height: `${baseHeight}px`
    }
  }

  // 动画模式下，高度根据动画进度调整
  const animatedHeight = baseHeight * animationProgress.value

  return {
    height: `${animatedHeight}px`,
    ...getContainerStyle()
  }
})
</script>

<style scoped>
.bottom-spacer {
  @apply w-full relative;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-spacer--animated {
  overflow: hidden;
}

.bottom-spacer--visible {
  /* 当底部可见时的额外样式 */
}

/* 底部指示器样式 */
.bottom-spacer__indicator {
  @apply absolute top-4 left-1/2 transform -translate-x-1/2;
  @apply flex flex-col items-center space-y-2;
  @apply text-gray-500 dark:text-gray-400;
  animation: fadeInUp 0.3s ease-out;
}

.bottom-spacer__indicator-line {
  @apply w-12 h-px bg-gradient-to-r;
  @apply from-transparent via-gray-400 to-transparent;
  @apply dark:via-gray-500;
}

.bottom-spacer__indicator-text {
  @apply text-xs font-medium tracking-wide;
  @apply opacity-70;
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bottom-spacer {
    /* 移动端可以适当减少高度 */
  }

  .bottom-spacer__indicator {
    @apply top-2;
  }

  .bottom-spacer__indicator-text {
    @apply text-xs;
  }
}

/* 主题适配 */
.dark .bottom-spacer__indicator-line {
  @apply via-gray-600;
}

.dark .bottom-spacer__indicator-text {
  @apply text-gray-300;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .bottom-spacer__indicator-line {
    @apply via-gray-800 dark:via-gray-200;
  }

  .bottom-spacer__indicator-text {
    @apply text-gray-900 dark:text-gray-100;
    @apply opacity-100;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .bottom-spacer {
    transition: none;
  }

  .bottom-spacer__indicator {
    animation: none;
  }
}
</style>
